<template>
	<view>
		<view :class="['pagenotify','s_'+wzinfo.status]" v-if="showAlert">
			<i :class="['iconfont',iconfont]"></i>{{alertMessage}}
		</view>
		<view style="height:100rpx" v-if="showAlert"></view>
		<view class="main">
			<view style="margin:200rpx 0;" v-if="loading">
				<u-loading-icon mode="semicircle"></u-loading-icon>
			</view>
			<view v-if="MainTips" class="MainTips">
				<view class="iconfont icon-queshengye_zanwuwenti"></view>
				<view class="text">{{MainTips}}</view>
			</view>
			<view v-if="!loading && !MainTips" class="readMain">

				<view class="baseMain">

					<view class="title">
						{{wzinfo.title}}
					</view>

					<view class="msginfo">
						<view>{{wzinfo.user_name?wzinfo.user_name:wzinfo.user_penname}}</view>
						<view>{{wzinfo.create_time}}</view>
					</view>
					<view class="content">
						<u-parse :content="call_message(wzinfo.content)"></u-parse>
					</view>
					<view class="img" v-if="wzinfo.image.length>0" style="margin:30rpx 0;">
						<u-album :urls="wzinfo.image" keyName="src2" rowCount="3" :multipleSize="100"></u-album>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 40rpx;">
						<view class="tags">
							<view class="t"><text>{{wzinfo.type}}</text></view>
							<view class="t"><text>{{wzinfo.classify}}</text></view>
						</view>

					</view>
					<view class="address" v-if="wzinfo.address"><i class="iconfont icon-ditu" />{{wzinfo.address}}
					</view>
				</view>

			</view>

		</view>
		<view class="line">

		</view>

		<view class="reply" v-if="wzinfo.passon_id && wzinfo.status==7">
			<view class="head">
				<view class="v"><i class="iconfont icon-shidirenzheng"></i></view>
				<view class="info">
					<view class="name">
						{{wzinfo.passon.user_name}}
					</view>
					<view class="verify">
						{{wzinfo.passon.user_verify}}
					</view>
				</view>
			</view>
			<view class="reply-content">
				您的留言已转交给相关机构进行处理，请您耐心等待回复。
			</view>
			<view class="time">
				{{$u.timeFormat(wzinfo.passon_time, 'yyyy-mm-dd')}}
			</view>
			<i class="iconfont icon-huifu"></i>
		</view>
		<view class="reply" v-for="(v,x) in wzinfo.reply" v-if="wzinfo.reply">
			<view class="head">
				<view class="v"><i class="iconfont icon-shidirenzheng"></i></view>
				<view class="info">
					<view class="name">
						{{v.user_name}}
					</view>
					<view class="verify">
						{{v.user_verify}}
					</view>
				</view>
			</view>
			<view class="reply-content">
				<view v-if="wzinfo.passon_id && wzinfo.passon_time" class="zhuanjiaoTips">
					<view class="old">@{{wzinfo.passon.user_verify}}</view>
					{{$u.timeFormat(wzinfo.passon_time, 'yyyy年mm月dd日 hh:MM:ss')}} 转交至此
				</view>
				<u-parse :content="call_message(v.l_reply)"></u-parse>
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view class="time">
					{{v.reply_time}}
				</view>
				<view class="" style="display: flex;align-items: baseline;">
					<Like :wid="wzinfo.wid" :reply_id="v.id" :count="v.like_count"></Like>
				</view>
			</view>


			<i class="iconfont icon-huifu"></i>
		</view>
		<view class="line" v-if="wzinfo.wid && (wzinfo.evaluate_all>0 || wzinfo.uid==userInfo.id)"></view>
		<view style="padding:40rpx;" v-if="wzinfo.wid && (wzinfo.evaluate_all>0 || wzinfo.uid==userInfo.id)">
			<Start :wzinfo="wzinfo"></Start>
		</view>
		<view class="line" v-if="wzinfo.wid"></view>
		<view style="padding:40rpx;" v-if="wzinfo.wid">
			<Reply :wid="wzinfo.wid"></Reply>
		</view>
		<view class="line"></view>
		<view class="content-box" v-if="!loading">
			<view class="content-box-title"><i class="iconfont icon-icon-test" style="font-size:70rpx;"></i>同地区留言</view>
			<view>
				<Lylist local="1" :ltype="wzinfo.l_type2"></Lylist>
			</view>
		</view>
	</view>
</template>

<script>
	import Lylist from '@/uni_modules/Lylist/Lylist.vue';
	import Like from '@/uni_modules/Lylist/Like.vue';
	import Reply from '@/uni_modules/Lylist/Reply.vue';
	import Start from '@/uni_modules/Lylist/Start.vue';

	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getReadMsg,
	} from '@/api/api.js';
	export default {
		components: {
			Lylist,
			Like,
			Reply,
			Start
		},
		data() {
			return {
				loading: 'loading',
				MainTips: '',
				showAlert: false,
				alertMessage: '',
				wzinfo: [],
				iconfont: "",
			}
		},
		onShareTimeline(res) {
			return {
				title: this.wzinfo.title || '分享一个来自麻辣社区四川省网上群众工作平台的留言',
				path: '/pages/index/thread?wid=' + this.wzinfo.wid,
				imageUrl: this.wzinfo.image.length > 0 ? this.wzinfo.image[0] :
					'https://wz.mala.cn/static/img/qzhswap-2023.jpg'
			}
		},
		onShareAppMessage(res) {
			if (!this.wzinfo) {
				uni.$u.toast('请稍后再试');
				return fase
			}
			return {
				title: this.wzinfo.title || '分享一个来自麻辣社区四川省网上群众工作平台的留言',
				path: '/pages/index/thread?wid=' + this.wzinfo.wid,
				imageUrl: this.wzinfo.image.length > 0 ? this.wzinfo.image[0] :
					'https://wz.mala.cn/static/img/qzhswap-2023.jpg'
			}
		},
		onLoad(options) {
			if (!options || !options.wid) {
				this.loading = false;
				this.MainTips = "发生了一些错误，请返回重试";
			} else {
				this.getRead(options.wid)
			}

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {

			call_message(str) {
				let m = str.replace(/\n/g, "<br /><br />")
				return m
			},
			getRead(wid) {
				let _this = this;
				getReadMsg({
					wid: wid
				}).then(r => {
					_this.loading = false;
					if (r.data.code == 200) {
						console.log(r.data.self)
						if (r.data.data.delete_time > 0) {
							this.MainTips = "该留言已不存在";
							return false;
						}
						if (r.data.self == 1) {
							if (r.data.data.status == 1) {
								_this.showAlert = true
								_this.alertMessage = '尚在审核中，请稍后'
								_this.iconfont = "icon-quanju_tousu"
								uni.setNavigationBarColor({
									frontColor: '#ffffff',
									backgroundColor: '#f9ae3d'
								})
							}
						}
						if (r.data.data.status == 3 || r.data.data.status == 4 || r.data.data.status == 5) {
							_this.showAlert = true
							_this.alertMessage = '已完结'
							_this.iconfont = "icon-chenggong"
							uni.setNavigationBarColor({
								frontColor: '#ffffff',
								backgroundColor: '#5ac725'
							})
						} else if (r.data.data.status == 2) {
							_this.showAlert = true
							_this.alertMessage = '等待处理中'
							_this.iconfont = "icon-dengdai"
							uni.setNavigationBarColor({
								frontColor: '#ffffff',
								backgroundColor: '#f9ae3d'
							})

						} else if (r.data.data.status == 7) {
							_this.showAlert = true
							_this.iconfont = "icon-dengdai"
							_this.alertMessage = '已转交，请等待处理'

							uni.setNavigationBarColor({
								frontColor: '#ffffff',
								backgroundColor: '#78d7b4'
							})
						}

						_this.wzinfo = r.data.data
					}
				})
			}
		}
	}
</script>
<style>
	.u-alert {
		padding: 30rpx;
	}

	.u-steps-item__wrapper {
		background-color: #f8f8f8 !important;
	}
</style>
<style scoped lang="scss">
	page,
	.main {
		background-color: #fff;
	}

	.pagenotify {
		background-color: #f9ae3d;
		height: 100rpx;
		line-height: 100rpx;
		width: 100%;
		color: #fff;
		justify-content: center;
		font-size: 40rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 1000;

		.iconfont {
			margin-right: 15rpx;
			font-size: 50rpx !important;
		}

		&.s_1,
		&.s_2 {
			color: #fff;
			background-color: #f9ae3d;
		}

		&.s_3,
		&.s_4,
		&.s_5 {
			background-color: #5ac725
		}

		&.s_7 {
			background-color: #78d7b4;
		}
	}

	.reply {
		padding: 40rpx;
		position: relative;
		overflow: hidden;

		border-top: 2px solid $base-color;


		.reply-content {
			line-height: 65rpx;
			font-size: 36rpx;
			margin-top: 20rpx;

			.zhuanjiaoTips {
				line-height: 45rpx;
				font-size: 28rpx;
				background-color: #f8f8f8;
				padding: 15rpx;
				border-radius: 10rpx;
				margin-bottom: 8rpx;
				color: #999;

				.old {
					color: #369;
				}
			}
		}

		.icon-huifu {
			position: absolute;
			top: -100rpx;
			font-size: 300rpx;
			right: -100rpx;
			color: #d1d5da;
			opacity: .2;
		}

		.time {
			color: #999;
			font-size: 30rpx;
			margin: 20rpx 0 40rpx 0;
		}

		.head {
			display: flex;
			align-items: center;

			.v .iconfont {
				font-size: 100rpx;
				color: $base-color;
			}

			.info {
				.name {
					font-size: 36rpx;
					color: $base-color;
					font-weight: bold;
				}

				.verify {
					color: #999;
					font-size: 30rpx;
					margin-top: 5rpx;
				}
			}
		}
	}

	.MainTips {
		padding: 150rpx 0;
		text-align: center;

		.iconfont {
			font-size: 150rpx;
			color: #eee;
		}

		.text {
			color: #ddd;
			font-size: 28rpx;
			margin: 30rpx;
		}
	}

	.readMain {
		.baseMain {
			background-color: #f8f8f8;
			padding: 40rpx;
		}

		.status {
			padding-bottom: 40rpx;
		}

		.tags {
			display: flex;

			align-items: center;

			.t {
				margin-right: 10rpx;
				color: #999;
				font-size: 32rpx;
			}
		}

		.title {
			font-size: 50rpx;
			color: #000;
			margin-bottom: 20rpx;
			list-height: 52rpx;
		}

		.msginfo {
			display: flex;
			justify-content: space-between;
			color: #999;
			font-size: 28rpx;
			margin: 20rpx 0;
		}

		.address {
			color: #999;
			font-size: 28rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}

		.content {

			color: #444;
			font-size: 36rpx !important;
			font-family: PingFangSC-Regular, sans-serif;
			line-height: 60rpx;
			width: 100%;
		}
	}

	.line {
		background-color: #f8f8f8;
		padding: 10rpx 0;
	}
</style>